<template>
  <div class="column view-border">
    <div class="hint-string q-my-sm">
      How is
      <span class="creator-name">{{ video!.creatorName }}'s</span> transition?
    </div>
    <div class="row justify-around items-center q-gutter-x-md">
      <gift-item
        v-for="item in gifts"
        :key="item.id"
        :item="item"
        @click="activeGift(item)"
        v-singular-event:complients="{videoId: video!.id, compliemnt: item.label}"
      />
    </div>
    <q-separator class="q-my-xs" style="background-color: #404040" />
    <q-btn
      label="Give feedback"
      no-caps
      dense
      text-color="sub"
      flat
      style="font-size: 10px; font-weight: bold"
      v-close-popup
    />
  </div>
</template>
<script setup lang="ts">
import { defineComponent, ref, PropType } from 'vue';
import Video from 'src/models/Video';
import { ComplimentItem } from 'src/models/ComplimentItem';
import GiftItem from 'components/ComplientItem.vue';
const props = defineProps({
  video: {
    type: Object as PropType<Video | undefined>,
    required: true,
  },
});
const gifts = ref<ComplimentItem[]>([
  {
    id: 1,
    label: 'Excellent',
    darkImage: '/images/compliments/fire@dark.png',
    lightImage: '/images/compliments/fire@light.png',
    normalImage: '/images/compliments/fire@normal.png',
    count: 0,
    isActive: false,
  },
  {
    id: 2,
    label: 'Great Voice',
    darkImage: '/images/compliments/microphone@dark.png',
    lightImage: '/images/compliments/microphone@light.png',
    normalImage: '/images/compliments/microphone@normal.png',
    count: 0,
    isActive: false,
  },
  {
    id: 3,
    label: 'Entertaining',
    darkImage: '/images/compliments/face@dark.png',
    lightImage: '/images/compliments/face@light.png',
    normalImage: '/images/compliments/face@normal.png',
    count: 0,
    isActive: false,
  },
  {
    id: 4,
    label: 'Helpful',
    darkImage: '/images/compliments/cap@dark.png',
    lightImage: '/images/compliments/cap@light.png',
    normalImage: '/images/compliments/cap@normal.png',
    count: 0,
    isActive: false,
  },
  {
    id: 5,
    label: 'Accurate',
    darkImage: '/images/compliments/hit@dark.png',
    lightImage: '/images/compliments/hit@light.png',
    normalImage: '/images/compliments/hit@normal.png',
    count: 0,
    isActive: false,
  },
]);
function activeGift(item: ComplimentItem) {
  item.isActive = !item.isActive;
}
</script>
<style lang="sass" scoped>

.view-border
  border: 1px solid #404040
  border-radius: 6px
  background-color: rgba(35,35,35,1)
  padding: 12px 12px 6px 12px

.hint-string
  font-size: 12px
  .creator-name
    color: $accent
</style>
